<template>
	<view class="bg">
		<view class="head">
			<image class="head_left" src="../../../static/wode/return.png" mode="" @tap="back()"></image>
			<view class="head_mid">
				完善资料(1/2)
			</view>
			<view class="head_right">

			</view>
		</view>
		<view class="remind">
			填写真实资料，认识新朋友的速度更快哦
		</view>
		<view class="headImg" @tap="gettoken('headImg')">
			<image class="borderRadius" v-if="userHeadImg!=''" :src="userHeadImg"></image>
			<image v-else src="../../../static/index/zhaopian.png" mode=""></image>
		</view>
		<view class="body">
			<input class="body_item" type="text" value="" placeholder="填写昵称" v-model="nickName" />
			<input v-if="type=='weixin'" class="body_item" type="number" value="" placeholder="手机号" v-model="phone" />
			<view class="body_item" @tap="choiceSex" v-if="sex==''">
				<view class="">
					性别<text>(设置后不可更改哦)</text>
				</view>
				<image src="../../../static/index/xia.png" mode=""></image>
			</view>
			<view class="body_item" @tap="choiceSex" v-else>
				<view class="">
					{{sex}}
				</view>
				<image src="../../../static/index/xia.png" mode=""></image>
			</view>
			<view class="body_item" v-if="goAbroadDate=='请选择'">
				出生日期
				<picker class="input" mode="date" start="1968-12-29" end="2019-1-1" @change="bindDateChange">
					<view class="uni-input">{{goAbroadDate}}</view>
					<image src="../../../static/index/xia.png" mode=""></image>
				</picker>
			</view>
			<view class="body_item2" v-else>
				<picker class="input" mode="date" start="1968-12-29" end="2019-1-1" @change="bindDateChange">
					<view class="uni-input">{{goAbroadDate}}</view>
					<image src="../../../static/index/xia.png" mode=""></image>
				</picker>
			</view>
			<input class="body_item" type="text" value="" placeholder="邀请码">
			</input>
		</view>
		<view class="btn" @tap="toHobby">
			下一步
		</view>
	</view>
</template>

<script>
	import qiniu from "../../../common/qiniuUploader.js"
	export default {
		data() {
			return {
				sex: '',
				goAbroadDate: "请选择", //日期
				imgList: '',
				userHeadImg: "",
				nickName: "",
				user_id: '',
				type:'',//是否第三方登录
				phone:'',//手机号
			};
		},
		mounted() {},
		onLoad(option) {
			this.user_id = option.user_id
			if(option.type!=undefined){
				this.type=option.type
				this.userHeadImg=uni.getStorageSync('avatar')
				this.nickName=uni.getStorageSync('nick_name')
			}
		},
		methods: {
			back() { //返回
				uni.navigateBack({
					delta: 1
				})
			},
			// #ifdef APP-PLUS
			gettoken(){
				this.appselectImg()
			},
			// #endif
			// #ifdef MP-WEIXIN
			gettoken() {
				var me = this;
				var data = {
					key: null,
				}
				this.myAjaxNewPost({
					model: 'push',
					controllerName: 'upload',
					actionName: 'getToken',
					data: data,
					successBack: function(res) {
			
						me.token = res.data.data
						console.log(me.token)
						if (me.token != '') {
							me.selectImg()
						}
			
					}
				})
			},
			// #endif
			appselectImg(){
				var me = this;
				uni.showActionSheet({
					itemList: ['拍照', '相册'],
					itemColor: '#008AFF',
					success: function(res) {
						var index = res.tapIndex;
						if (index == 1) {
							uni.chooseImage({
								count: 1,
								sizeType: ['compressed'],
								sourceType: ['album'],
								success: function(res) {
									// me.card_front = res.tempFilePaths[0];
									var filePath = res.tempFilePaths[0];
									uni.uploadFile({
										url: 'http://www.curiousmore.com:8768/eg-api/push/upload/uploadPicture',
										// url: 'http://192.168.101.14:8768/eg-api/push/upload/uploadPicture',
										filePath: filePath,
										name: 'file',
										formData: {
											'user_id': uni.getStorageSync('user_id'),
											'type': 'pic'
										},
										success: function(uploadFileRes) {
											// me.backImgArr.push(JSON.parse(uploadFileRes.data)[0]);
											console.log(JSON.parse(uploadFileRes.data)[0]);
											var imageURL = JSON.parse(uploadFileRes.data)[0];
											me.userHeadImg = imageURL
				
										},
										fail: function(e) {
											uni.showToast({
												title: '图片上传失败，请重试',
												icon: 'none'
											})
											return;
										}
									});
								}
							});
						} else if (index == 0) {
							uni.chooseImage({
								count: 1,
								sizeType: ['compressed'],
								sourceType: ['camera'],
								success: function(res) {
									// me.card_front = res.tempFilePaths[0];
				
									var filePath = res.tempFilePaths[0];
									uni.uploadFile({
										url: 'http://www.curiousmore.com:8768/eg-api/push/upload/uploadPicture',
										// url: 'http://192.168.101.14:8768/eg-api/push/upload/uploadPicture',
										filePath: filePath,
										name: 'file',
										formData: {
											'user_id': uni.getStorageSync('user_id'),
											'type': 'pic'
										},
										success: function(uploadFileRes) {
											// me.backImgArr.push(JSON.parse(uploadFileRes.data)[0]);
											console.log(JSON.parse(uploadFileRes.data)[0]);
											var imageURL = JSON.parse(uploadFileRes.data)[0];
											me.userHeadImg = imageURL
									
										},
										fail: function(e) {
											uni.showToast({
												title: '图片上传失败，请重试',
												icon: 'none'
											})
											return;
										}
									});
								}
							});
						}
					}
				});
			},
			selectImg() { //上传头像
				var me = this;
				uni.showActionSheet({
					itemList: ['拍照', '相册'],
					itemColor: '#008AFF',
					success: function(res) {
						var index = res.tapIndex;
						if (index == 1) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album'], //从相册选择
								success: function(res) {
									console.log(res)
									var filePath = res.tempFilePaths[0];
									// console.log(JSON.stringify(res.tempFilePaths));
									// 交给七牛上传
									if (me.token != '') {
										uni.showLoading({
											title:'上传中'
										})
										qiniu.upload(filePath, (res) => {
											console.log(res.imageURL)
											var imageURL = res.imageURL
											me.userHeadImg = imageURL
											uni.hideLoading()
											console.log('file url is: ' + res.fileUrl);
										}, (error) => {
											uni.showToast({
												title: '上传失败',
												icon: null
											});
											console.log('error: ' + error);
										}, {
											region: 'ECN',
											domain: 'http://img.curiousmore.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
											key: null, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
											// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
											uptoken: me.token, // 由其他程序生成七牛 uptoken
											// uptokenURL: 'http://192.168.6.6:8768/eg-api/push/upload/getToken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "[yourTokenString]"}
											uptokenFunc: function() {
												return '[yourTokenString]';
											}
										}, (res) => {
											console.log('上传进度', res.progress)
											console.log('已经上传的数据长度', res.totalBytesSent)
											console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
											
										}, () => {
											// 取消上传
										}, () => {
											// `before` 上传前执行的操作
										}, (err) => {
											// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
											
										});
									}

								}
							});
						} else if (index == 0) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '], //相机
								success: function(res) {
									// console.log(JSON.stringify(res.tempFilePaths));
									var filePath = res.tempFilePaths[0];
									// console.log(JSON.stringify(res.tempFilePaths));
									// 交给七牛上传
									if (me.token != '') {
										uni.showLoading({
											title:'上传中'
										})
										qiniu.upload(filePath, (res) => {
											console.log(res.imageURL)
											var imageURL = res.imageURL
											me.userHeadImg = imageURL
											uni.hideLoading()
											console.log('file url is: ' + res.fileUrl);
										}, (error) => {
											uni.showToast({
												title: '上传失败',
												icon: null
											});
											console.log('error: ' + error);
										}, {
											region: 'ECN',
											domain: 'http://img.curiousmore.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
											key: null, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
											// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
											uptoken: me.token, // 由其他程序生成七牛 uptoken
											// uptokenURL: 'http://192.168.6.6:8768/eg-api/push/upload/getToken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "[yourTokenString]"}
											uptokenFunc: function() {
												return '[yourTokenString]';
											}
										}, (res) => {
											console.log('上传进度', res.progress)
											console.log('已经上传的数据长度', res.totalBytesSent)
											console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
										}, () => {
											// 取消上传
										}, () => {
											// `before` 上传前执行的操作
										}, (err) => {
											// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
											
										});
									}
								}
							});
						}
					}
				});
			},
			choiceSex() {
				var me = this;
				uni.showActionSheet({
					itemList: ['男', '女'],
					itemColor: '#008AFF',
					success: function(res) {
						var index = res.tapIndex;
						console.log(index);
						var itemList = ['男', '女'];
						if (index == 0) {
							me.sex = '男';
						} else {
							me.sex = '女';
						}
						console.log(me.sex)
						console.log(me.userHeadImg)
						console.log(me.goAbroadDate)
						console.log(me.nickName)
					}
				})
			},
			toHobby() {
				if (this.userHeadImg != undefined && this.sex != '' && this.goAbroadDate != '请选择' && this.nickName != ''&&this.phone!='') {
					this.setPhone();
					if (this.sex == '男') {
						var sex = 1
					} else if (this.sex == '女') {
						var sex = 2
					}
					var data = {
						sex: sex,
						user_id: this.user_id,
						nick_name: this.nickName,
						avatar: this.userHeadImg,
						// birth: this.goAbroadDate
					};
					var me = this;
					this.myAjaxNewPost({
						model: 'user',
						controllerName: 'userInfo',
						actionName: 'update',
						data: data,
						successBack: function(res) {
							console.log(res);
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
							if (res.data.code == 0) {
								uni.navigateTo({
									url: "../../My/hobby/hobby?select=zhuce" + '&user_id=' + me.user_id
								})
							}
						},
					})
				} else {
					uni.showToast({
						title: '您有必填项没填！',
						icon: 'none'
					})
					return false
				}
			},
			bindDateChange: function(e) { //日期
				this.goAbroadDate = e.target.value
			},
			setPhone(){
				var data={
					login_name:this.phone,
					user_id:this.user_id,
				}
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'user',
					actionName: 'update',
					data: data,
					successBack: function(res) {
						console.log(res)
					},
				})
			},
		},
	}
</script>

<style scoped>
	.bg {
		background: #ffffff;
		height: 100%;
	}

	.head {
		height: 162upx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333333;
		width: 100%;
		padding: 0 24upx;
	}

	.head image {
		width: 20upx;
		height: 36upx;
	}

	.head_right {
		width: 45upx;
	}
	.head_mid{
		padding-top: 90upx;
	}
	.head_left{
		padding-top: 70upx;
	}

	.remind {
		font-size: 24upx;
		padding: 20upx 24upx;
		color: #999999;
		background: #F5F5F5;
	}

	.headImg {
		padding-left: 295upx;
		margin-top: 120upx;
	}

	.headImg image {
		width: 160upx;
		height: 160upx;
		border-radius: 160upx;
	}

	.body_item {
		padding: 20upx 24upx;
		border-bottom: 1upx solid #E6E6E6;
		color: #888888;
		font-size: 28upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.body_item2 {
		padding: 20upx 24upx;
		border-bottom: 1upx solid #E6E6E6;
		color: #333333;
		font-size: 28upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bidy_item text {
		font-size: 20upx;
	}

	.body_item image {
		width: 28upx;
		height: 16upx;
	}

	.body_item2 image {
		width: 28upx;
		height: 16upx;
	}

	.body input {
		color: #333333;
	}

	.body {
		margin-bottom: 88upx;
	}

	.input {
		padding-right: 44upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.input image {
		position: absolute;
		right: 0upx;
		bottom: 10upx;
	}
</style>
